<template>
  <div class="lum-dialog-mask">
    <div class="lum-dialog-box">
      <el-container class="container">
        <el-header class="header no-select" height="60px">
          <p>群管理 ({{ detail.group_name }})</p>
          <p class="tools">
            <el-icon @click="close"><ele-Close /></el-icon>
          </p>
        </el-header>
        <el-main class="main no-padding">
          <el-container class="full-height">
            <el-aside width="100px" class="aside-border no-select">
              <div
                v-for="(menu, index) in menus"
                :key="menu.name"
                class="menu-list"
                :class="{ selectd: tabIndex == index }"
                v-text="menu.name"
                @click="triggerTab(index)"
              />
            </el-aside>

            <!-- 群介绍模块 -->
            <el-main v-if="tabIndex == 0">
              <el-row>
                <el-col :span="14">
                  <el-form ref="groupForm" :model="form" :rules="rules" label-width="60px">
                    <el-form-item label="群名:" prop="group_name">
                      <el-input
                        v-model="form.group_name"
                        size="default"
                        placeholder="请输入群名称"
                        maxlength="30"
                        show-word-limit
                      />
                    </el-form-item>
                    <el-form-item label="群描述:">
                      <el-input
                        v-model="form.profile"
                        type="textarea"
                        rows="3"
                        placeholder="请输入群描述"
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        type="primary"
                        size="default"
                        :icon="Edit"
                        :loading="loading"
                        @click="editGroup(groupForm)"
                        >修改信息
                      </el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="10" class="avatar-col">
                  <div class="avatar-box">
                    <img v-show="form.avatar" :src="form.avatar" />
                    <!-- <div class="upload-icon">
                      <el-icon><ele-Upload /></el-icon>
                    </div> -->
                    <div class="upload-mask" @click="isAvatarCropper = true">
                      <el-icon><ele-Plus /></el-icon>
                    </div>
                  </div>
                  <p style="margin-top: 20px">设置头像</p>
                </el-col>
              </el-row>
            </el-main>

            <!-- 群成员模块 -->
            <el-main v-else-if="tabIndex == 1" class="no-padding">
              <el-container class="full-height">
                <el-header class="notice-header">
                  <el-input
                    v-model="keywords"
                    style="width: 200px;height:unset;"
                    size="default"
                    clearable
                    :prefix-icon="Search"
                    :placeholder="`搜索群成员 ( 共${members.length}人 )`"
                  />
                  <p>
                    <el-button plain size="small" :icon="Plus" @click="inviteFriendBox = true">邀请好友</el-button>
                    <el-button v-if="batchDelMember && members.length > 0" type="danger" size="small" :icon="Delete" @click="deleteMembers">确认删除</el-button>
                    <el-button v-else-if="batchDelMember && members.length < 0" type="info" size="small" :icon="Back" @click="inviteFriendBox = false">取消操作</el-button>
                    <el-button v-else plain size="small" :icon="Finished" @click="batchDelMember = true">批量操作</el-button>
                  </p>
                </el-header>
                <el-main class="no-padding">
                  <el-scrollbar
                    class="full-height"
                    tag="section"
                    :native="false"
                  >
                    <div class="members">
                      <div
                        v-for="member in searchs"
                        class="member no-select"
                        :class="{
                          selectd: member.is_delete && batchDelMember,
                        }"
                        :key="member.user_id"
                      >
                        <div class="item-header">
                          <div class="avatar" @click="catUserDetail(member)">
                            <el-avatar :size="30" :src="member.avatar">
                              <img :src="detaultAvatar" />
                            </el-avatar>
                            <span class="nickname" v-text="member.nickname" />
                            <span class="larkc-tag" v-show="member.leader == 2">群主</span>
                          </div>
                          <div
                            v-show="batchDelMember && member.leader != 2"
                            class="tools"
                          >
                            <el-icon :class="{ 'is-delete': member.is_delete }" @click.stop="triggerDelBtn(member)"><ele-SuccessFilled /></el-icon>
                          </div>
                        </div>
                        <div class="profile">
                          签名 | {{ member.motto ? member.motto : '未设置' }}
                        </div>
                      </div>
                    </div>
                  </el-scrollbar>
                </el-main>
              </el-container>
            </el-main>

            <!-- 群公告模块 -->
            <!-- <el-main v-else-if="tabIndex == 2" class="no-padding">
              <el-container class="full-height">
                <el-header class="notice-header" height="50px" style="padding-left: 14px">
                  <span>群公告 ({{ notice.items.length }})</span>
                  <el-button plain size="small" :icon="Plus" @click="showNoticeBox(0, '', '')">添加公告</el-button>
                </el-header>

                <el-main class="no-padding">
                  <el-scrollbar
                    class="full-height"
                    tag="section"
                    :native="false"
                  >
                    <el-empty description="暂无群公告" :image-size="80" v-if="notice.items.length == 0" />
                    <div v-else class="notices">
                      <div
                        v-for="(item, index) in notice.items"
                        :key="item.id"
                        class="notice"
                      >
                        <div class="title">
                          <span
                            class="left-title"
                            v-text="item.title"
                            @click="showNoticeBox(item.id, item.title, item.content)"
                          ></span>
                          <span
                            class="right-tools no-select"
                            @click="catNoticeDetail(index)"
                            >{{ item.isShow ? '收起' : '展开' }}</span
                          >
                        </div>
                        <p class="datetime">
                          <el-avatar :size="15" :src="item.avatar">
                            <img :src="detaultAvatar" />
                          </el-avatar>
                          <span
                            class="text nickname"
                            v-text="item.nickname"
                            @click="catUserDetail(item)"
                          />
                          <span class="text">
                            发表于 {{ item.created_at.substr(0, 16) }}
                          </span>
                        </p>
                        <p
                          class="content"
                          :class="{ retract: !item.isShow }"
                          v-text="item.content"
                        ></p>
                      </div>
                    </div>
                  </el-scrollbar>
                </el-main>
              </el-container>
            </el-main> -->

            <el-main v-else-if="tabIndex == 2" class="no-padding"> 
              <el-container class="full-height">
                <el-header class="notice-header" height="50px" style="padding-left: 14px">
                  <span>设置管理 </span>
                </el-header>

                <el-main class="no-padding" style="padding-top:10px;">
                  <el-row class="lumie-row">
                     <label class="lumie-tips">解散群组:</label>
                     <div class="lumie-data">
                      <el-button type="primary" link @click="dismiss">点击解散</el-button>
                     </div>
                  </el-row>
                  <!-- <el-row class="lumie-row">
                     <label class="lumie-tips">全员禁言:</label>
                     <div class="lumie-data">
                      <el-switch v-model="is_disturb" @change="handleDisturb" />
                      <p class="tips">开启后除群主和管理员以外，其它成员禁止发言。</p>
                     </div>
                  </el-row> -->
                </el-main>
              </el-container>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
    </div>

    <!-- 编辑公告信息 -->
    <div class="lum-dialog-mask animated fadeIn" v-show="notice.isShowform">
      <div class="notice-box">
        <h4>编辑群公告</h4>
        <el-form ref="noticeForm" :model="notice.form" :rules="notice.rules" label-width="50px">
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="notice.form.title"
              size="default"
              placeholder="请输入标题..."
              maxlength="30"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="详情" prop="content">
            <el-input
              v-model="notice.form.content"
              type="textarea"
              rows="5"
              placeholder="请输入公告详情..."
              maxlength="500"
            />
          </el-form-item>
          <el-form-item style="text-align: right;margin-top:20px">
            <el-button plain size="small" @click="notice.isShowform = false">取消</el-button>
            <el-button type="primary" size="small" :loading="notice.loading" @click="onSubmitNotice(noticeForm)">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <transition name="el-fade-in-linear">
      <AvatarCropper v-if="isAvatarCropper" @close="closeAvatarCropper" />
    </transition>

    <transition name="el-fade-in-linear">
      <GroupLaunch
        v-if="inviteFriendBox"
        :group-id="groupId"
        @close="inviteFriendBox = false"
        @invite-success="inviteSuccess"
      />
    </transition>
    <user-card-detail v-model:show="showUserDetail" :user_id="user_id"></user-card-detail>
  </div>
</template>

<script>
import { computed, onMounted, reactive, toRefs, ref } from 'vue'
import { useChatApi } from '/@/api/chat/index'
import { ElMessage, ElNotification, ElMessageBox  } from 'element-plus'
import { useChatTalk } from '/@/stores/chat/talk'
import { useDialogueInfo } from '/@/stores/chat/dialogue'

import GroupLaunch from '/@/views/chat/components/group/GroupLaunch.vue'
import AvatarCropper from '/@/views/chat/components/AvatarCropper.vue'
import detaultAvatar from '/@/assets/detault-avatar.jpg'

import { Search, Plus, Delete, Finished, Edit, Back } from '@element-plus/icons-vue'

export default {
    name: 'GroupManage',
    props: {
        groupId: {
            type: [String, Number],
            default: null,
        }
    },
    components: {
        GroupLaunch,
        AvatarCropper
    },
    setup(props, context) {
        const { groupId } = toRefs(props)
        const chatApi = useChatApi()
        const chatTalk = useChatTalk()
        const dialogueInfo = useDialogueInfo()
        const groupForm = ref()
        const noticeForm = ref()
        const state = reactive({
            // 当前选中菜单
            tabIndex: 0,
            menus: [
                { name: '群信息' },
                { name: '群成员' },
                // { name: '群公告' },
                { name: '群设置' },
            ],
            loading: false,
            is_disturb: false,
            form: {
                group_name: '',
                profile: '',
                avatar: '',
            },
            rules: {
                group_name: [
                  {
                      required: true,
                      message: '用户昵称不能为空!',
                      trigger: 'blur',
                  }
                ],
            },
            detail: {
                group_name: '',
                profile: '',
                avatar: '',
            },
            // 群成员列表
            batchDelMember: false,
            members: [],
            keywords:"",
            // 群公告相关数据
            notice: {
                isShowform: false,
                loading: false,
                form: {
                id: 0,
                title: '',
                content: '',
                },
                rules: {
                title: [
                    {
                    required: true,
                    message: '标题不能为空!',
                    trigger: 'blur',
                    },
                ],
                content: [
                    {
                    required: true,
                    message: '详情不能为空',
                    trigger: 'blur',
                    },
                ],
                },
                items: [],
            },
            inviteFriendBox: false,
            isAvatarCropper: false,
            showUserDetail: false,
            user_id: null,
            signoutStatus: 0,  // 退出群聊状态 
        })
        const searchs = computed(() => {
            return state.keywords == ''
            ? state.members
            : state.members.filter(item => {
                return (
                    item.nickname.match(state.keywords) != null ||
                    item.user_card.match(state.keywords) != null
                )
            })
        })
        const index_name = computed(() => {
          return dialogueInfo.index_name
        })
        // 加载群信息
        const loadGroupDetail = () => {
            chatApi.ServeGroupDetail({
                group_id: groupId.value,
            }).then(({ code, data }) => {
                if (code == 0) {
                    state.form = state.detail = {
                        group_name: data.group_name,
                        profile: data.profile,
                        avatar: data.avatar,
                    }
                }
            })
        }
        // 加载群组成员列表
        const loadMembers = () => {
            chatApi.ServeGetGroupMembers({
                group_id: groupId.value,
            }).then(res => {
                if (res.code == 0) {
                    state.members = res.data.map(item => {
                        item.is_delete = false
                        return item
                    })
                }
            })
        }
        // 加载群组公告列表
        const loadNotices = () => {
            // ServeGetGroupNotices({
            //     group_id: groupId.value,
            // }).then(res => {
            //     if (res.code == 0) {
            //         state.notice.items = res.data.rows.map(item => {
            //             item.isShow = false
            //             return item
            //         })
            //     }
            // })
        }
        // 修改群信息
        const editGroup = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (!valid) return false
                state.loading = true
                chatApi.ServeEditGroup({
                    group_id: parseInt(groupId.value),
                    group_name: state.form.group_name,
                    profile: state.form.profile,
                    avatar: state.form.avatar,
                })
                .then(res => {
                    if (res.code == 0) {
                        state.detail.group_name = state.form.group_name
                        state.detail.profile = state.form.profile
                        state.detail.avatar = state.form.avatar
                        ElMessage({
                            message: '信息修改成功...',
                            type: 'success',
                        })
                    } else {
                        ElMessage.error('信息修改失败...')
                    }
                })
                .finally(() => {
                    state.loading = false
                })
            })
        }
        // 左侧菜单栏切换事件
        const triggerTab = (i) => {
            state.tabIndex = i
        }
        // 关闭头像裁剪弹出层
        const closeAvatarCropper = (type, avatar = '') => {
            state.isAvatarCropper = false
            if (type == 1 && avatar != '') {
                state.form.avatar = avatar
            }
        }
        // 显示编辑公告窗口
        const showNoticeBox = (id = 0, title = '', content = '') => {
            state.notice.isShowform = true
            state.notice.form.id = id
            state.notice.form.title = title
            state.notice.form.content = content
        }
        // 编辑公告提交事件
        const onSubmitNotice = async (formEl) => {
            if (!formEl) return
            await formEl.validate(( ) => {
                state.notice.loading = true
                chatApi.ServeEditGroupNotice({
                    notice_id: parseInt(state.notice.form.id),
                    group_id: parseInt(state.groupId),
                    title: state.notice.form.title,
                    content: state.notice.form.content,
                    is_top: 0,
                    is_confirm: 0,
                })
                .then(res => {
                    if (res.code == 0) {
                        state.notice.isShowform = false
                        loadNotices()
                        ElNotification({
                            title: '消息提示',
                            message: state.notice.form.id
                            ? '群公告修改成功...'
                            : '群公告添加成功...',
                            type: 'success',
                        })
                    } else {
                        ElNotification({
                            title: '消息提示',
                            message: state.notice.form.id
                            ? '群公告修改失败...'
                            : '群公告添加失败...',
                            type: 'success',
                        })
                    }
                })
                .catch(() => {
                    ElNotification({
                        title: '消息提示',
                        message: '网络异常，请稍后再试...',
                        position: 'bottom-right',
                        type: 'warning',
                    })
                })
                .finally(() => {
                    state.notice.loading = false
                })
            })
        }
        // 展开/收起群公告详情
        const catNoticeDetail = (index) => {
            state.notice.items[index].isShow = !state.notice.items[index].isShow
        }
        // 查看群成员信息事件
        const catUserDetail = (item) => {
            // 启用一个组件框, 即user框数据
            state.user_id = item.userId
            state.showUserDetail = true
        }
        // 选中删除成员事件
        const triggerDelBtn = (member) => {
            let i = state.members.findIndex(item => {
                return item.id === member.id
            })
            state.members[i].is_delete = !state.members[i].is_delete
        }
        // 批量删除群成员
        const deleteMembers = () => {
            let ids = [],
                names = []
            state.members.forEach(item => {
                if (item.is_delete) {
                    ids.push(item.user_id)
                    names.push(item.nickname)
                }
            })
            if (ids.length == 0) {
                state.batchDelMember = false
                return
            }
            ElMessageBox.confirm(
                `您确定要将【 ${names.join('、')}】移出群聊?`, 
                '温馨提示', 
            {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                chatApi.ServeRemoveMembersGroup({
                    group_id: parseInt(groupId.value),
                    members_ids: ids.join(','),
                }).then(res => {
                    if (res.code == 0) {
                        loadMembers()
                        ElNotification({
                            title: '删除成功',
                            message: `已成功将群成员移除群组...`,
                            type: 'success',
                        })
                        state.batchDelMember = false
                    }
                })
            })
            .catch(() => {
                state.members.map(item => {
                    return (item.is_delete = false)
                })
                state.batchDelMember = false
            })
        }
        // 好友邀请成功回调方法
        const inviteSuccess = () => {
            state.inviteFriendBox = false
            loadMembers()
        }
        const close = () => {
          context.emit('close')
        }
        // 设置禁言
        const handleDisturb = (e) => {
          console.log(e)
        }
        // 解散群组
        const dismiss = () => {
            ElMessageBox.confirm(
                `你确定要解散当前群组吗？此操作是不可恢复的！`, 
                '提示', 
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
                dangerouslyUseHTMLString: true,
            }).then(() => {
              chatApi.ServeDismissGroup({
                group_id: groupId.value
              }).then(() => {
                close()
                // chatTalk.REMOVE_TALK_ITEM(index_name.value)
                // dialogueInfo.UPDATE_DIALOGUE_MESSAGE({
                //   talk_type: 0,
                //   receiver_id: 0,
                //   is_robot: 0
                // })
              })
            })
        }
        onMounted(() => {
            loadGroupDetail()
            loadMembers()
        })
        return {
            ...toRefs(state),
            searchs,
            inviteSuccess,
            deleteMembers,
            triggerDelBtn,
            catUserDetail,
            catNoticeDetail,
            onSubmitNotice,
            showNoticeBox,
            closeAvatarCropper,
            triggerTab,
            editGroup,
            loadNotices,
            loadMembers,
            groupForm,
            noticeForm,
            detaultAvatar,
            close,
            Search,
            Plus,
            Delete,
            Finished,
            Edit,
            handleDisturb,
            dismiss,
            Back
        }
    }
}
</script>

<style scoped lang="scss">
.lum-dialog-box {
  width: 80%;
  height: 500px;
  max-width: 800px;
}

.aside-border {
  display: flex;
  flex-direction: column;
  padding: 8px 0; 
  border-right: 1px solid #f5f5f5;

  .menu-list {
    height: 25px;
    line-height: 25px;
    margin: 8px 2px;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
    padding-left: 10px;
    text-align: center;
    &.selectd {
      color: var(--el-color-primary);
      position: relative;
      &::after{
        content: "";
        position: absolute;
        top: 0;
        right: -2px;
        bottom: 0;
        border-right: 3px solid var(--el-color-primary);
      }
    }
  }
}

.avatar-col {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.avatar-box {
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 7px 1px #e8e4e4;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: ease 0.5s;

  .upload-icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(184, 184, 197, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      font-size: 30px;
      color: var(--el-color-primary);
    }
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 0;
  }

  .upload-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 3;
    display: none;
    justify-content: center;
    align-items: center;

    i {
      font-size: 30px;
      color: white;
    }
  }

  &:hover .upload-mask {
    display: flex;
  }
}

/* 群成员相关 start */
.members {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 20px;
  justify-content: space-between;

  .member {
    width: 48%;
    height: 70px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px dashed #e2dcdc;
    margin: 5px 0;
    padding: 3px;
    transition: ease 0.5s;

    .larkc-tag {
      background-color: #ffe699;
      color: red;
      font-size: 12px;
      font-weight: 400;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      border-radius: 2px;
      cursor: default;
      user-select: none;
      line-height: 18px;
      transform-origin: left;
      flex-shrink: 0;
      transform: scale(.88);
    }

    .item-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .avatar {
        flex: 1 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 3px 5px;

        .nickname {
          font-size: 13px;
          margin: 0 5px 0 15px;
        }
      }

      .tools {
        flex-basis: 50px;
        overflow: hidden;
        text-align: right;
        padding-right: 5px;

        i {
          color: #cccccc;
        }

        .is-delete {
          color: var(--el-color-primary);
        }
      }
    }

    .profile {
      color: #8f8a8a;
      font-size: 12px;
      padding: 3px 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 3px 0;
    }

    &:hover,
    &.selectd {
      border-color: var(--el-color-primary);
    }
  }
}

/* 群成员相关 end */

/* 公告相关 start */
.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5eeee;
}

.empty-notice {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  span {
    color: #cccccc;
    font-size: 13px;
  }
}

.notices {
  .notice {
    cursor: pointer;
    min-height: 76px;
    overflow: hidden;
    border-bottom: 1px dashed #e2dcdc;
    margin-bottom: 15px;
    margin-right: 15px;
    padding-bottom: 5px;
    margin: 2px 20px 15px 15px;

    h6 {
      font-size: 15px;
      font-weight: 300;
    }

    .title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      height: 30px;

      .left-title {
        flex: 1 1;
        height: 100%;
        line-height: 30px;
        font-size: 14px;
      }

      .right-tools {
        flex-basis: 70px;
        flex-shrink: 0;
        height: 100%;
        line-height: 30px;
        text-align: right;
        font-weight: 300;
        font-size: 12px;
        color: var(--el-color-primary);
      }
    }

    .datetime {
      font-size: 10px;
      color: #a59696;
      font-weight: 300;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 10px 0;

      .text {
        margin: 0 5px;
      }

      .nickname {
        color: var(--el-color-primary);
        font-weight: 400;
      }
    }

    .retract {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .content {
      font-size: 12px;
      line-height: 28px;
      font-weight: 500;
      color: #7d7a7a;
    }
  }
}

.notice-box {
  position: relative;
  padding: 28px;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  height: 315px;
  width: 420px;

  h4 {
    margin-bottom: 20px;
    font-weight: 400;
  }
}

/* 公告相关 end */

:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}
.lumie-row{
  padding: 15px 15px 24px;
  display: flex;
  align-items: stretch;
  .lumie-tips{
    width: 60px;
    display: block;
    margin-right: 10px;
    font-size: 14px;
    color: #1f2225;
  }
  .lumie-data{
    flex: 1;
  }
  :deep(.el-switch){
    height: unset;
    margin-top: -2px;
  }
  .tips{
    margin-top: 8px;
    font-size: 13px;
    color: var(--el-text-color-regular);
  }
}
.signout-box {
  width: 100%;
  height: 100px;
  background: #ffffff;
  position: absolute;
  z-index: 2;
  bottom: 0;
  box-shadow: -1px -3px 11px 0px #cccccc82;
  -webkit-animation: showFooter 0.35s ease-in-out;
  -moz-animation: showFooter 0.35s ease-in-out;
  animation: showFooter 0.35s ease-in-out;

  p {
    &:first-child {
      text-align: center;
      height: 35px;
      line-height: 35px;
    }

    &:nth-child(2) {
      text-align: center;
      font-size: 12px;
      color: #cccccc;
    }
  }

  .mt38 {
    margin-top: 38px;
  }
}

.signout-btn {
  text-align: center;
  margin-top: 10px;

  button {
    height: 30px;
    width: 90px;
    line-height: 30px;
    background: var(--el-color-primary-dark-2);
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;

    &:first-child {
      background: #ff3333;
      color: white;
    }

    &:last-child {
      background: #f1eded;
    }
  }
}
</style>